<template>
	<div class="page">
		<div class="p-10 system-page-background b-r-4">
			<!-- <el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="API编排" name="1"></el-tab-pane>
				<el-tab-pane label="函数白名单" name="2"></el-tab-pane>
			</el-tabs> -->
			<my-form
				inline
				query
				:model="queryParams"
				:formItem="[
					{
						label: '数据源',
						prop: 'dataSourceId',
						itemType: 'select',
						list: dataList,
						fileType: { label: 'title', value: 'id' }
					}
				]"
				:searchFn="() => loadData()"
			/>
		</div>

		<div class="f1 h0 flex-col m-t-10">
			<div key="1" v-show="activeName === '1'" class="flex-row f1 h0">
				<div class="left system-page-background b-r-4">
					<div class="p-10 flex-row" style="border-bottom: 1px solid var(--el-border-color)">
						<my-input placeholder="请输入名称" v-model="codeName" />
						<el-button class="m-l-5" type="primary" @click="insertFn" icon="Plus">新增</el-button>
					</div>
					<div class="f1 h0 p-10">
						<el-tree
							:data="state.list"
							:props="{
								children: 'children',
								label: 'sqlName'
							}"
							:expand-on-click-node="false"
							:filter-node-method="filterNode"
							highlight-current
							node-key="id"
							ref="refTree"
							default-expand-all
							@node-click="handleNodeClick"
						>
							<template #default="{ node, data }">
								<span class="custom-tree-node">
									<span class="ellipsis">{{ node.label }}</span>
									<span>
										<my-button-text @click="updateFn(data)">修改</my-button-text>
										<my-button-text @click="deleteFn(data)">删除</my-button-text>
									</span>
								</span>
							</template>
						</el-tree>
					</div>
				</div>

				<div class="right system-page-background b-r-4 p-10">
					<my-form
						id="leftForm"
						ref="baseform"
						label-position="top"
						:model="basicOptions"
						:detail="true"
						:formItem="[
							{
								label: 'API信息',
								prop: 'sqlCode'
							},
							{
								label: '查询设置',
								prop: 'isQuerySetting'
							},
							{
								label: 'SQL',
								prop: 'sqlValue'
							}
						]"
					>
						<template #sqlCode>
							<el-row :gutter="20" class="w100">
								<el-col class="flex" :span="6">
									<label class="label">编码:</label>
									<el-input v-model="basicOptions.sqlCode" placeholder="请输入内容..." />
								</el-col>
								<el-col class="flex" :span="6">
									<label class="label">名称:</label>
									<el-input v-model="basicOptions.sqlName" placeholder="请输入内容..." />
								</el-col>
								<el-col class="flex" :span="6">
									<label class="label">描述:</label>
									<el-input v-model="basicOptions.sqlDesc" placeholder="请输入内容..." />
								</el-col>
							</el-row>
						</template>
						<template #isQuerySetting>
							<el-row :gutter="20" class="w100">
								<el-col class="flex" :span="6">
									<label class="label">开启查询:</label>
									<el-radio-group v-model="basicOptions.isQuerySetting">
										<el-radio :label="0">否</el-radio>
										<el-radio :label="1">是</el-radio>
									</el-radio-group>
								</el-col>
								<el-col class="flex" :span="6">
									<label class="label">是否查询总数:</label>
									<el-radio-group v-model="basicOptions.isTotal">
										<el-radio :label="0">否</el-radio>
										<el-radio :label="1">是</el-radio>
									</el-radio-group>
								</el-col>
								<el-col class="flex" :span="6">
									<label class="label">最大返回数量:</label>
									<el-input v-model="basicOptions.maxSelectCount" placeholder="请输入内容..." />
								</el-col>
								<el-col class="flex" :span="6">
									<label class="label">最大查询时间:</label>
									<el-input v-model="basicOptions.maxSelectTime" placeholder="请输入内容..." />秒
								</el-col>
							</el-row>
						</template>
						<template #sqlValue="{ model, prop }">
							<my-monaco-editor
								class="sql"
								v-model:modelValue="model[prop]"
								width="100%"
								height="230px"
								language="sql"
								:editorOptions="{
									lineNumbers: true,
									line: true,
									lineWrapping: true,
									styleActiveLine: true,
									readOnly: true
								}"
							/>
						</template>
					</my-form>
				</div>
			</div>
			<div key="2" v-show="activeName === '2'">函数白名单</div>
		</div>

		<!-- 添加、修改对话框 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="750px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="130px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="formItem"
			>
				<template #isTotal="{ model, prop }">
					<el-radio-group v-model="model[prop]">
						{{ model[prop] }}
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</template>
				<template #isQuerySetting="{ model, prop }">
					<el-radio-group v-model="model[prop]">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</template>
				<template #isCache="{ model, prop }">
					<el-radio-group v-model="model[prop]">
						<el-radio :label="0">否</el-radio>
						<el-radio :label="1">是</el-radio>
					</el-radio-group>
				</template>
				<template #sqlValue="{ model, prop }">
					<my-monaco-editor
						class="sql"
						v-model:modelValue="model[prop]"
						width="100%"
						height="230px"
						language="sql"
						:editorOptions="{
							lineNumbers: true,
							line: true,
							lineWrapping: true,
							styleActiveLine: true
						}"
					/>
				</template>
			</my-form>
			<template #footer>
				<el-button @click="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="/request/apiArrange">
import { addArrange, editArrange, removeArrange, listArrange, listSource } from '@/api/data';

const queryParams = ref({ dataSourceId: '1706180494553874433' }),
	state = reactive({
		list: []
	}),
	// 弹出层
	dialog = reactive({
		title: '',
		open: false,
		name: '',
		form: {
			id: undefined,
			isTotal: 1,
			isQuerySetting: 1,
			isCache: 0
		}
	}),
	formItem = computed(() => {
		return [
			{
				label: '数据源id',
				prop: 'dataSourceId',
				itemType: 'select',
				list: dataList.value,
				fileType: { label: 'title', value: 'id' },
				required: true,
				disabled: dialog.name == 'insert',
				col: { span: 12 }
			},
			{
				label: '编码',
				prop: 'sqlCode',
				required: true,
				col: { span: 12 }
			},
			{
				label: '名称',
				prop: 'sqlName',
				col: { span: 12 }
			},
			{
				label: '描述',
				prop: 'sqlDesc',
				col: { span: 12 }
			},
			{
				label: '参数值',
				prop: 'paramValue',
				col: { span: 12 }
			},
			{
				label: 'sql类型',
				prop: 'sqlType',
				col: { span: 12 }
			},
			{
				label: '缓存过期时间',
				prop: 'cacheExpired',
				itemType: 'number',
				min: 0,
				col: { span: 12 }
			},
			{
				label: '是否查询总数',
				prop: 'isTotal',
				col: { span: 12 }
			},
			{
				label: '是否开启查询设置',
				prop: 'isQuerySetting',
				col: { span: 12 }
			},
			{
				label: '是否开启缓存',
				prop: 'isCache',
				col: { span: 12 }
			},
			{
				label: '最大返回数量',
				prop: 'maxSelectCount',
				show: dialog.form.isQuerySetting == 1,
				col: { span: 12 }
			},
			{
				label: '最大查询时间(秒)',
				prop: 'maxSelectTime',
				show: dialog.form.isQuerySetting == 1,
				col: { span: 12 }
			},
			{
				label: 'sql',
				prop: 'sqlValue'
			}
		];
	}),
	refDialogForm = shallowRef(null),
	{ dialogTitle } = pageMixin({ dialog }),
	activeName = ref('1');

// 下拉数据
const dataList = ref([]);
listSource().then((res) => {
	dataList.value = res.data;
});

//左边
function loadData() {
	listArrange({ dataSourceId: queryParams.value.dataSourceId }).then((res) => {
		state.list = res.data;
		const data = state.list[0];
		if (data) {
			handleNodeClick(data);
			nextTick(() => {
				refTree.value?.setCurrentKey(data.id);
			});
		}
	});
}
loadData();

function insertFn() {
	resetForm(unref(refDialogForm));
	unref(dialog).name = 'insert';
	unref(dialog).open = true;
	unref(dialog).form.id = undefined;
	unref(dialog).form.dataSourceId = queryParams.value.dataSourceId;
}

function updateFn(row) {
	unref(dialog).name = 'update';
	unref(dialog).open = true;
	nextTick(() => {
		unref(dialog).form = clone(row);
	});
}

function deleteFn(row) {
	confirm('此操作将删除该条数据, 是否继续?')
		.then(() => {
			removeArrange({ ids: row.id }).then(() => {
				loadData();
			});
			msgSuccess('删除成功');
		})
		.catch(() => {
			msgInfo('已取消删除！');
		});
}

function dialogSubmitFn() {
	unref(refDialogForm)?.$refs?.refMyForm.validate((valid) => {
		if (valid) {
			if (dialog.name == 'insert') {
				addArrange(dialog.form).then(() => {
					unref(dialog).open = false;
					msgSuccess('新增成功！');
					loadData();
				});
			} else if (dialog.name == 'update') {
				editArrange(dialog.form).then(() => {
					unref(dialog).open = false;
					msgSuccess('修改成功！');
					loadData();
				});
			}
		}
	});
}

// 筛选节点
const codeName = ref(''),
	refTree = shallowRef(null);
watch(codeName, (val) => {
	refTree.value?.filter(val);
});
function filterNode(value, data) {
	if (!value) return true;
	return data.sqlName.includes(value);
}
// 节点单击事件
function handleNodeClick(data) {
	basicOptions.value = data;
}
//右边form数据
const basicOptions = ref({});
</script>

<style lang="scss" scoped>
.left {
	height: 100%;
	width: 20%;
	min-width: 350px;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.right {
	margin-left: 10px;
	height: 100%;
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	width: 0;
}
#leftForm {
	:deep(.el-form-item__label) {
		margin: 20px 0 20px;
		font-size: 20px;
		color: var(--el-color-primary) !important;
	}
}

.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
.label {
	white-space: nowrap;
	margin-right: 10px;
	width: 90px;
	text-align: right;
	& + div {
		flex: 1;
	}
}
.num {
	font-size: 20px;
	margin: 10px;
	font-style: oblique;
}
.sql {
	border: 1px solid #dcc6c6;
	box-sizing: border-box;
}
</style>
